<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content">
		<image src="/static/package/bgIcon.png" class="bgIcon bgIcon1" mode="widthFix"></image>
		<image src="/static/package/bgIcon.png" class="bgIcon bgIcon2" mode="widthFix"></image>
		<image src="/static/package/bgIcon.png" class="bgIcon bgIcon3" mode="widthFix"></image>
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view>
		<view class="searchWrap">
			<view class="searchBox">
				<uni-icons type="search" color="#FFA9A9" size="20"></uni-icons>
				<input placeholder-class="placeClass" placeholder="搜索店铺" type="text" v-model.trim="value1" />
			</view>
			<view class="yuan">
				<view class="refreshempty" @click="Toggle">
					?
				</view>
			</view>
			<view class="yuan" @click="resetList">
				<uni-icons class="refreshempty" size="20" color="#FFB9B9" type="refreshempty"></uni-icons>
			</view>
		</view>
		<view class="options">
			<view :class="index==optionIndex?'option action':'option'" @click="optionIndexFn(index)"
				v-for="(item,index) in option" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="tabLay">
			<next-tabs @change="tabChang" v-model="current4" pillsBorderRadius="30rpx" :tabs="list1" :pills="true"
				line-height="0" bgColor="transparent" fontSize='28rpx;' height='52rpx' lineHeight='52rpx'
				pillsColor="transparent" paddingItem='0 42rpx' activeColor="#FF9191" color="#FF7474"></next-tabs>
		</view>
		<view class="listWrap">
			<scroll-view style="height: 1150rpx;" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="transparent"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort" @scrolltolower="scrolltolower">
				<!-- <scroll-view style="height:calc(100vh - 520rpx); " :scroll-top="scrollTop" scroll-y="true"
					refresher-enabled="true" @scroll="scroll" :refresher-triggered="triggered" :refresher-threshold="100"
					refresher-background="transparent" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
					@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolower"> -->
				<noData v-if="activitiesList.length === 0 && !loading"></noData>
				<template v-else>
					<view :class="item.openType?'scroll-view-item scroll-view-item-action':'scroll-view-item'"
						v-for="(item,index) in activitiesList" :key="index">
						<image :src="item.openType?'/static/my/xfbg4_open.png':'/static/my/xfbg4.png'" class="xfbg"
							mode="aspectFit">
						</image>

						<scroll-view scroll-y="true" class="forDetails">
							<view class="details" v-for="(item2,index2) in item.front_show" :key="index2">
								<view class="txt">
									{{item2.label}}
								</view>
								<uni-icons class="circleIcon" :type="item2.isactive?'checkbox-filled':'circle'"
									:color="item2.isactive?'#3CC599':'#979797'" size="20"></uni-icons>
							</view>
						</scroll-view>
						<view class="infoWrap">
							<view class="leftWrap">
								<view class="lookType" @click="openFn(item,index)">
									<!--  -->
									{{item.openType?'收起条件':'查看条件'}}
								</view>
								<image src="https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
									class="img" mode="aspectFill"></image>
							</view>
							<view class="rightWrap">
								<view class="text">
									<view class="txt">
										<!-- 转发福利` = QQ转发
									`分享赠图` = 微信转发 -->
										活动类型：{{item.platform==0?"分享赠图":'转发福利'}}
									</view>
									<view class="txt">
										活动店铺：{{item.shop_name}}
									</view>
									<view class="txt">
										活动机台：{{item.machine_name}}
									</view>
									<view class="txt">
										活动时效：{{item.start_time.substring(5, 10)}}至{{item.end_time.substring(5, 10)}}
									</view>
								</view>
								<view class="bnt" @click="participateForward(item.machine_id)">
									参与转浮
								</view>
							</view>
						</view>
					</view>
					<!-- 使用uni-load-more组件显示加载状态 -->
					<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'"
						iconType="auto"></uni-load-more>

				</template>
			</scroll-view>
		</view>
		<uni-popup ref="popup" @change="changePopup" safeArea backgroundColor="#fff" borderRadius="38px 38px 0 0">
			<view class="shareContent">
				<view class="titleLay">
					<view class="title">
						背包说明
					</view>
					<view class="clearBox" @click="closePop">
						<uni-icons type="closeempty" color="#999999" size="16"></uni-icons>
					</view>
				</view>
				<view class="infoTxt">
					1.购买任意商品，有机会获得冠军头衔

				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupFL" @change="changePopup" safeArea isMaskClick='true'>
			<view class="flPop" @click="closePop2">
				<image src="/static/my/popBg.png" class="popBg" mode="aspectFit"></image>
				<view :class="item.openType?'scroll-view-item scroll-view-item-action':'scroll-view-item'"
					v-for="(item,index) in listdata" :key="index" v-if="index==0">
					<image v-if="" :src="item.openType?'/static/my/xfbg4_open.png':'/static/my/xfbg4.png'" class="xfbg"
						mode="aspectFit">
					</image>

					<view class="forDetails">
						<view class="details" v-for="(item2,index2) in Data2" :key="index2">
							<view class="txt">
								{{item2.title}}
							</view>
							<uni-icons class="circleIcon" :type="item2.type?'checkbox-filled':'circle'"
								:color="item2.type?'#3CC599':'#979797'" size="20"></uni-icons>
						</view>
					</view>
					<view class="infoWrap">
						<view class="leftWrap">
							<view class="lookType" @click.stop="openFn(item)">
								{{item.openType?'收起条件':'查看条件'}}
							</view>
							<image src="https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
								class="img" mode="aspectFill"></image>
						</view>
						<view class="rightWrap">
							<view class="text">
								<view class="txt">
									活动类型：转发福利{{index}}
								</view>
								<view class="txt">
									活动店铺：倒计时扭蛋馆
								</view>
								<view class="txt">
									活动机台：倒计时扭蛋馆男头50期期期期
								</view>
								<view class="txt">
									活动时效：01-23至02-23
								</view>
							</view>
							<view class="bnt">
								上传截图
							</view>
						</view>
					</view>
				</view>
				<view class="lookMore">
					<view class="txt">
						{{item.openType?'查看已参与':'查看未参与'}}
					</view>
					<view>
						<uni-icons type="right" color="#333333" size="20"></uni-icons>
						<uni-icons class="rightIcon" type="right" color="#333333" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '领取福利',
				value1: '',
				option: [{
					name: '扭蛋',

				}, {
					name: '直购',

				}],
				optionIndex: 0,
				current4: -1,
				list1: ['分享赠图', '转发福利', ],
				listdata: [{
					type: false,
				}, {
					type: true,
				}, {
					type: true,
				}, {
					type: true,
				}, ],
				Data2: [{
					title: '1.转发说说',
					type: true
				}, {
					title: '2.转发说说高于5分钟',
					type: false
				}, {
					title: '3.购买次数大于8次',
					type: false
				}, ],
				pageMetaShow: false,

				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				triggered: false,
				_freshing: false,
				activitiesList: [],
				page: 1, // 当前页码
				page_size: 10, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
			};
		},

		mounted() {
			// this.$set(this.current4, 0)
			this.current4 = 0;
			this.resetList()
		},
		onLoad() {
		},
		methods: {
			optionIndexFn(index) {
				this.optionIndex = index;
				this.current4 = 0;
				this.resetList()
			},
			tabChang(e) {
				console.log(e, "asd");
				this.current4=e;
				this.resetList()
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000)
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			scrolltolower() {
				console.log("触底");
			},
			openFn(item, index) {
				console.log(this.activitiesList[index]);
				this.activitiesList[index].openType = !this.activitiesList[index].openType
				// debugger
				this.$forceUpdate()

				// this.$set(this.activitiesList[index].openType,!this.activitiesList[index].openType )
				// item.openType = !item.openType
			},
			changePopup(e) {
				this.pageMetaShow = e.show
			},
			closePop() {
				this.$refs.popup.close()
			},
			Toggle() {
				this.$refs.popup.open('bottom')
			},
			Toggle2() {
				this.$refs.popupFL.open('left')
			},

			closePop2() {
				this.$refs.popupFL.close()
			},


			//自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log("onpulling", e);
				// this.page = 1;
				// this.noMoreData = false;
				// this.getForwardListFn();
			},
			// 自定义下拉刷新被触发	
			onRefresh() {
				console.log("onRefresh");
				let that = this;
				if (this._freshing) return;
				// 1. 设置刷新状态
				this._freshing = true;
				this.triggered = true;
				// 2. 重置分页参数
				// 3. 重新加载数据
				this.resetList();
				// 4. 无论成功失败，2秒后复位刷新状态
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000);
			},
			// 自定义下拉刷新被复位	
			onRestore() {
				this.triggered = false;
				this._freshing = false;
				// this.triggered = false // 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件	
			scrolltolower: function(e) {
				console.log(e);
				// 如果没有更多数据或正在加载，则返回
				if (this.noMoreData || this.loading) return

				// 页码增加并获取下一页数据
				this.page++
				this.getForwardListFn()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部，目前没用，感觉可以优化流程
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.getForwardListFn()
			},
			getForwardListFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/activities/forward-list', {
						page: this.page,
						page_size: this.page_size,
						platform: this.current4, //	转发平台：0-微信，1-QQ
						machine_type: this.optionIndex,
						keyword:this.value1
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							/* 	data.list.forEarch(item => {
								item.switchCurrent=0
							}) */
							// console.log(user_list, "user_list");
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.activitiesList = data.list || []
								// this.userList = user_list || []
							} else {
								// 后续页，合并数据
								this.activitiesList = [...this.activitiesList, ...(data.list || [])]
								// this.userList = [...this.userList, ...(user_list || [])]
							}

							// 更新总数据量
							this.total = data.total || 0;
							// 判断是否还有更多数据
							this.noMoreData = this.activitiesList.length >= this.total
							// this.activitiesList = res.data.list;

							this.activitiesList.forEach(item => {
								item.openType = false;
							})
							// 把下拉状态复位
							this.triggered = false;
							this._freshing = false;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
			participateForward(machineId) {

				this.$http('/v1/machines/participate-forward', {
					"machine_id": Number(machineId),
				}, 'POST').then(res => {
					if (res.code == 0) {
						this.resetList() 
					} else {}
					this.$showToast(res.msg)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.content {
		position: relative;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
			@include setwh(100vw, 680upx);
			background: linear-gradient(180deg, #FCCEDB 0%, rgba(255, 255, 255, 0) 100%);
		}

		.bgIcon {
			@include setwh(200upx, 0);
			position: fixed;
			top: 0;
			opacity: 0.38;
		}

		.bgIcon1 {
			top: -52rpx;
			left: -48rpx;
		}

		.bgIcon2 {
			left: 90rpx;
		}

		.bgIcon3 {
			top: 110rpx;
		}

		::v-deep .headWrap {
			.txt {
				color: #fff;
			}
		}

		.searchWrap {
			@include flexLayout(center, space-between);
			padding: 0 34upx 0 42upx;

			::v-deep.searchBox {
				@include flexLayout(center);
				width: 524rpx;
				height: 55rpx;
				padding-left: 34upx;
				background: rgba(255, 255, 255, 0.36);
				border-radius: 30rpx;
				// backdrop-filter: blur(16px);

				input {
					width: 100%;
					padding-left: 20upx;
					color: #fff;
				}

				.placeClass {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFA8A8;
					line-height: 32rpx;
				}
			}

			.yuan {
				@include setwh(55upx, 55upx);
				background: rgba(255, 255, 255, 0.6);
				box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(206, 206, 206, 0.5);
				border-radius: 50%;
				text-align: center;
				line-height: 55upx;
				@include flexLayout(center, center);

				.refreshempty {
					font-weight: bold;
					color: #FFB9B9;
					font-size: 40upx;
				}
			}
		}

		.options {
			@include flexLayout(center, center);
			margin: 44upx auto 42upx;
			padding: 0 34upx 2upx;
			border-bottom: 4upx solid #FFC5C5;

			.option {
				font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
				font-weight: 500;
				font-size: 34rpx;
				color: #FF7474;
				background: none;
				line-height: 62upx;
				position: relative;
				@include setwh(122upx, 62upx);
				text-align: center;
				transition: color .5s;

				&:after {
					content: '';
					background: url("/static/my/optionAction.png") no-repeat;
					background-size: cover;
					width: 0;
					height: 34rpx;
					border-radius: 4rpx;
					@include positionCenter;
					top: 66upx;
					transition: width .5s;
				}

				&+.option {
					margin-left: 196upx;
				}
			}

			.action {
				color: #FFFFFF;
				background: url("/static/my/optionActionBg.png") no-repeat;
				background-size: cover;

				&:after {
					content: '';
					width: 167rpx;

				}
			}
		}

		::v-deep .tabLay {
			padding: 0 28upx;
			margin-bottom: 30upx;
			position: relative;
			z-index: 1;

			.next-tabs__container-pills.animation {
				border: 2rpx solid #FFA8A8;
			}
		}

		.scroll-view-item {
			padding: 0 40upx 0 46upx;
			position: relative;

			.xfbg {
				width: 100%;
				height: 416upx;
				top: 0;
				left: 0;
				right: 0;
				transition: height 0.3s ease-out;
			}

			.forDetails {
				position: absolute;
				left: 136rpx;
				top: 68px;
				transform: rotate(4deg);
				@include setwh(450upx, 154upx);
				opacity: 0;
				transition: opacity 0.2s ease-out;

				.details {
					@include flexLayout(center, space-between);

					.txt {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: 500;
						font-size: 24rpx;
						color: #848484;
						line-height: 32rpx;
						width: calc(100% - 25px);
					}

					.circleIcon {}
				}
			}

			.infoWrap {
				position: absolute;
				width: 100%;
				height: 416upx;
				z-index: 1;
				bottom: 0;
				left: 0;
				right: 0;

				// background-color: #FF7474;
				.leftWrap {
					position: absolute;
					top: 0;

					.lookType {
						background: url('/static/my/openTypeBg.png') no-repeat;
						background-size: cover;
						@include setwh(128upx, 128upx);
						font-family: kkt;
						font-weight: normal;
						font-size: 18rpx;
						color: #2E2E2E;
						line-height: 128upx;
						text-align: center;
						position: relative;
						left: 70rpx;
						top: 10rpx;
						z-index: 1;
					}

					.img {
						@include setwh(186rpx, 186rpx);
						position: absolute;
						transform: rotate(-9deg);
						left: 146rpx;
						top: 76rpx;
					}
				}

				.rightWrap {
					position: absolute;
					right: 84rpx;
					bottom: 72rpx;
					transform: rotate(9deg);
					width: 310upx;
					padding-left: 34upx;

					// background-color: #2Ea;
					.text {
						font-family: kkt;
						font-weight: normal;
						position: relative;
						top: 30rpx;

						.txt {
							font-size: 18rpx;
							color: #2E2E2E;
							padding-bottom: 26upx;
						}
					}

					.bnt {
						position: relative;
						left: 40upx;
						bottom: -10upx;
						text-align: center;
						line-height: 68upx;
						font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						// line-height: 28rpx;
						// width: 164rpx;
						// height: 68rpx;
						// background: #FFBBBB;
						// border-radius: 23rpx;
					}
				}
			}
		}

		.scroll-view-item-action {
			.xfbg {
				height: 676upx;
			}

			.forDetails {
				opacity: 1;
			}

			.infoWrap {
				.leftWrap {

					.lookType {
						top: 2upx;
					}

					.img {
						top: 68rpx;
					}
				}
			}

			.infoWrap {

				.rightWrap {
					.bnt {
						bottom: -4upx;
					}
				}
			}
		}
	}

	.shareContent {
		position: relative;
		z-index: 999;

		.titleLay {
			@include flexLayout(center,
				space-between);
			padding: 20upx 50upx 48upx;

			.title {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.clearBox {
				@include flexLayout(center, center);
				@include setwh(46upx, 46upx);
				background-color: #EDEDED;
				border-radius: 50%;

			}
		}

		.infoTxt {
			padding: 0 66upx;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 29rpx;
			color: #454545;
			line-height: 40rpx;
		}
	}

	.flPop {
		position: relative;
		// background: url('/static/my/popBg.png') no-repeat;
		// background-size: cover;
		// @include setwh(100vw,62vh);
		@include setwh(750upx, 1000upx);

		.popBg {
			@include setwh(750upx, 1000upx);
			position: absolute;
			left: 0;
			top: 158upx;
		}

		.scroll-view-item {
			top: 550upx;
			// padding: 0;
		}

		.scroll-view-item-action {
			top: 400upx;
		}

		.lookMore {
			position: absolute;
			bottom: -70upx;
			left: 28upx;
			@include flexLayout(center, center);

			.txt {
				font-family: kkt;
				font-weight: normal;
				font-size: 32rpx;
				color: #39289E;
				line-height: 46rpx;
			}

			.rightIcon {
				margin-left: -20upx;
			}
		}
	}
</style>